<template>
	<view :style="{'--color':color}">
		<navBar :bgColor="bgColor" :transparent="transparent" color="#fff"></navBar>
		 <image :src="$imgUrls(classify_info.classimg)" mode="aspectFill" class="Cover_Img"></image>
		
		<list :pageData="pageData" :genre="genre" :classifyid="classifyid" :classify_info="classify_info"></list>
		
		<postBtn :classifyid="classifyid" :homePun="homePun" :genre="genre"></postBtn>	 
	
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import navBar from '@/components/navBar/navBar.vue'
	import list from '../components/forum/list.vue';
	import postBtn from '../components/forum/postBtn.vue';
	export default {
		components: {
			navBar,
			list,
			postBtn
		},
		data() {
			return {
				getMore:true,
				title:'',
				bgColor:'0', //  0、没有背景色， 1、为白色  2、为主题色
				nav: ['全部', '热门'],
				current: 0,
				viewTop:0,
				fixed:false,
				transparent:false,
				classifyid:'',
				homePun:0,  // 1为打卡话题
				pageData:[],
				classify_info:'',
				pageindex:1,
				pagecount:10,	
				genre:1,
			}
		},
		onLoad(e) {
			if(e.classifyid) this.classifyid = e.classifyid;
			if(e.homePun) this.homePun = e.homePun;  
		},
		onShow() {
			this.ViewInfo();
			this.user_space_manage();
		},
		methods: {
			user_space_manage(){
				this.$http.get({
					url:'/communityApi/user_space_manage',
					data:{
						pageindex:this.pageindex,
						pagecount:this.pagecount,
						classifyid:this.classifyid,
						// hot:this.current
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					const result = res.data;
					if(result.genre) this.genre = result.genre;
					this.classify_info = result.classify_info;
					const dataInfo = result.data || [];
					this.pageindex == 1 ? this.pageData = dataInfo : this.pageData = [...this.pageData,...dataInfo];
					if(dataInfo.length < this.pagecount)  this.getMore = false;
				})
			},
			
			ViewInfo(){
				this.$getViewInfo('#navBox').then(res=>{
					if(res) this.viewTop = res.top;
				})
			},
			
			changeNav(index){
				this.current = index;
				this.getMore = true;
				this.pageindex = 1;
				this.user_space_manage();
			},
		},
		computed: {
			...mapState(['color', 'colorVal', 'vid']),
		},
		
		onReachBottom() {
			if(!this.getMore) return false;
			this.pageindex++;
			this.user_space_manage();
		},
		
		
		// onShareAppMessage() {
		// 	return {
		// 		title: this.classify_info.name,
		// 		desc: this.classify_info.classinfo,
		// 		path:`/pages/index/index?share_v_id=${this.vid}&pageType=999`,
		// 		imageUrl: this.imgUrl+this.classify_info.classimg
		// 	}
		// },
		
		// onShareTimeline(){
		// 	return {
		// 		title: this.classify_info.classinfo,
		// 		query: {share_v_id: this.vid},
		// 		imageUrl: this.imgUrl+this.classify_info.classimg
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.Cover_Img{
		width:100%;
		height: 500rpx;
		overflow: hidden;
	}
	
	// .active::after {
	// 	content: '';
	// 	width:40rpx;
	// 	height: 2px;
	// 	background-color: var(--color);
	// 	position: absolute;
	// 	left:50%;
	// 	bottom: 0;
	// 	transform: translate(-50%,0);
	// }
	// .fixedBox{
	// 	position: fixed;
	// 	top:90px;
	// 	left:0;
	// 	z-index:888;
	// }
	// .topBg{
	// 	width:100%;
	// 	height: 200px;
	// }
	// .content{
	// 	padding:0 30rpx;
	// 	padding-top:88px;
	// }
	// .imgli{
	// 	width:80rpx;
	// 	height: 80rpx;
	// }
	// .nav{
	// 	border-radius: 30rpx 30rpx 0 0;
	// 	margin-top: -30rpx;
	// }
</style>
